<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>故障上报</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <!-- 可选的Bootstrap主题文件（一般不使用） -->
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  
<script>
 $(document).ready(function(){
  	
	//dom加载完毕后，动态生成selector的选项 
	var terminalNoArray = ${terminalNoArray};
    var selector = $("#selector");
    for(var i=0; i<terminalNoArray.length; i++) {
    	  if(0 == i)
    		  selector.append("<option selected='true'>" + terminalNoArray[i] +"号终端</option>");
    	  else
    		  selector.append("<option>" + terminalNoArray[i] +"号终端</option>");
      }
    
    //设置手机号
    var tel = ${tel};
    $("#tel").attr("placeholder", tel);
    
  //点击标签变色、再次点击时恢复
  $(".label").click(function(){
  		if($(this).attr("class") == "label label-default") {
  			$(this).attr("class", "label label-success");
  		} else {
  			$(this).attr("class", "label label-default");
  		}
  		
  	});
    
 });
</script>
</head>
<body>
<div id= "header" class="container">
      <h4>请将您遇到的问题告诉我，<span style="color:red">30分钟</span>内必答。</h4>
      <div class="row">
      		<div class="col-xs-4">
      		您遇到的问题是(点击选中):
      		</div>
      		<div class="col-xs-8">
	      		<select id="selector" class="col-xs-12">
				</select>
			</div>
	  </div>
</div>


<div id="body" class="container">

	<div id="tag" class="container">
  		<h3>
  			<span id="tag0" class="label label-default">打票故障</span>
  			<span id="tag1" class="label label-default">兑奖故障</span>
  			<span id="tag2" class="label label-default">机器黑屏</span>
  		</h3>
  		<h3>
  			<span id="tag3" class="label label-default">连不上网</span>
  			<span id="tag4" class="label label-default">机器报错</span>
  			<span id="tag5" class="label label-default">其他错误</span>
  		</h3>
  	</div>
	
	<div>
  		<textarea form="hiddenForm" name="content" class="form-control" rows="3" placeholder="请在此填入您遇到的问题，如票面信息不全（必填）" required="required"></textarea>
  	</div>
  	<div class="row">
	  	<div class='col-xs-4' style='text-align:center;height:120px; padding-top:10px; overflow:hidden'>
			<table style="height:120px; width:80%">
	  				<tr>
	  					<td style="text-align:center">添加故障图片将会更快应答</td>
	  				</tr>
			</table>
	  	</div>  
	  	
		<div id="chooseImage"class='col-xs-4' style='text-align:center;height:120px; padding-top:10px; overflow:hidden'>
	  		<a>
	  			<table border="1" style="height:110px; width:100%">
	  				<tr>
	  					<td bgcolor="" style="text-align:center"><font size="14" color="gray">+</font></td>
	  				</tr>
	  			</table>
	  		</a>	
	  	</div>  	
  	</div>
  	
  	<form id="hiddenForm" action="faultReportDownload" method="post">
 		<input type="hidden" id="serverId" name="serverId" value="">
 		<input type="hidden" id="terminalNo" name="terminalNo" value="">
 		<input type="hidden" id="tagId" name="tagId" value="">
 	</form>
 		<br>
 		
 	<div class="row">
 		<label class="col-xs-4" >您的手机号：</label>
 		<div class="col-xs-8">
 			<input type="tel" id="tel" class="form-control" name="tel">
 		</div>
 	</div>
 	
 	<br>
  	<div class="form-group">
		<button type="button" id="uploadImage" class="form-control btn btn-primary btn-block">提交</button>
  	</div>
  	
  	
</div>

<footer class="container">  
	<p>
		<h4>报障小贴士：<small>这样描述您将更快获得准确答复</small></h4>
		
	</p>
	<p class="text-danger">“终端登录后按快捷键32311按确认出票后报002011错。”</p>
</footer>

</body>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script type="text/javascript">
  wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: 'wx636f16263036892d', // 必填，公众号的唯一标识
    timestamp: '${timestamp}', // 必填，生成签名的时间戳
    nonceStr: '${nonceStr}', // 必填，生成签名的随机串
    signature: '${signature}',// 必填，签名，见附录1
    jsApiList: ['onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'startRecord',
               'stopRecord',
                'onVoiceRecordEnd',
                'playVoice',
                'pauseVoice',
                'stopVoice',
                'onVoicePlayEnd',
                'uploadVoice',
                'downloadVoice',
                'chooseImage',
                'previewImage',
                'uploadImage',
                'downloadImage',
                'translateVoice',
                'getNetworkType',
                'openLocation',
                'getLocation',
                'hideOptionMenu',
               ' showOptionMenu',
               ' hideMenuItems',
                'showMenuItems',
               ' hideAllNonBaseMenuItem',
               ' showAllNonBaseMenuItem',
              '  closeWindow',
              '  scanQRCode',
              '  chooseWXPay',
               ' openProductSpecificView',
               ' addCard',
               ' chooseCard',
                'openCard'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2--->一大串CC+CV

});
</script>

<script type="text/javascript">
      // 5 图片接口
	  // 5.1 拍照、本地选图
	
	  //全局变量
	  var images = {
	    localId: [],  //本地图片
	    serverId: []  //服务器图片
	  };
	var i = 0;
	$('#chooseImage').click(function () {
      wx.chooseImage({
        success: function (res) {
          images.localId = images.localId.concat(res.localIds);
          alert("i=" + i + " 图片总数=" + images.localId.length);
          for (i; i < images.localId.length; i++) {
            
            var div = $("<div class='col-xs-4' style='height:120px; padding-top:10px; overflow:hidden'></div>");
	        var img = $("<img id='aaa' onclick='clickme(" + i + ")' style='width:100%; height:100%' src=" + images.localId[i] + "></img>");
            div.append(img);
            $("#chooseImage").before(div);
          };
        }
      });
    });

    	  // 5.3 上传图片
	  $('#uploadImage').click(function () { 
	    if (images.localId.length == 0) {
	      alert('请先使用 chooseImage 接口选择图片');
	      return;
	    }
	    var j = 0, length = images.localId.length;
	    function upload() {
	      wx.uploadImage({
	        localId: images.localId[j],
	        success: function (res) {
	          j++;
	          alert('已上传：' + i + '/' + length);
	          images.serverId.push(res.serverId);
	          if (j < length) {
	            upload();
	          }
	          else {
	        	alert("图片id: " + images.serverId);  
	        	alert("选择的终端:" + $('#selector').find("option:selected").text());
	          	$('#serverId').val(images.serverId);
	          	$('#terminalNo').val(function getTerminalNo(){
	          		return $('#selector').find("option:selected").text();
	          	});
	          	$('#tagId').val(function getTagId(){
	          		var tagId = "";
	          		for(var tagIndex = 0; tagIndex < $(".label").length; tagIndex ++) {
	          			if($("#tag" +tagIndex).attr("class") == "label label-success")
	          				tagId += tagIndex;
	          		}
	          		alert("选择的标签：" + tagId);
	          		return tagId;
	          	});
	          	$('#hiddenForm').submit();
	          }
	        },
	        fail: function (res) {
	          alert(JSON.stringify(res));
	        }
	      });
	    }
	    upload();
	  });

  /*动态创建的元素的点击事件以下几种方式都失败
  	$('#aaa').live('click', function() {
    	alert("live");
  	});
  	$('#aaa').on('click', function() {
    	alert("on");
  	});
  	$(document).on('click', '#aaa', function() {
  		alert("on");
  	});
*/


	function clickme (i) {
		alert(i + ': ' + images.localId[i]);
	  	// alert($(this).attr('src'));
	
		//  微信jssdk不支持本地图片的预览	
     	/* wx.previewImage({
        	current: images.localId[i],
        	urls: [
	          'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
	          'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg',
	          images.localId[0].toString(),
	          'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg',
	          'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg'
  
        ]
      });*/
    }

</script>

<script type="text/javascript">
wx.ready(function () {
	  

	  // 5.4 下载图片
	  document.querySelector('#downloadImage').onclick = function () {
	    if (images.serverId.length === 0) {
	      alert('请先使用 uploadImage 上传图片');
	      return;
	    }
	    var i = 0, length = images.serverId.length;
	    images.localId = [];
	    function download() {
	      wx.downloadImage({
	        serverId: images.serverId[i],
	        success: function (res) {
	          i++;
	          alert('已下载：' + i + '/' + length);
	          images.localId.push(res.localId);
	          if (i < length) {
	            download();
	          }
	        }
	      });
	    }
	    download();
	  };

	  // 6 设备信息接口
	  // 6.1 获取当前网络状态
	  document.querySelector('#getNetworkType').onclick = function () {
	    wx.getNetworkType({
	      success: function (res) {
	        alert(res.networkType);
	      },
	      fail: function (res) {
	        alert(JSON.stringify(res));
	      }
	    });
	  };

	  // 8 界面操作接口
	  // 8.1 隐藏右上角菜单
	  document.querySelector('#hideOptionMenu').onclick = function () {
	    wx.hideOptionMenu();
	  };

	  // 8.2 显示右上角菜单
	  document.querySelector('#showOptionMenu').onclick = function () {
	    wx.showOptionMenu();
	  };

	  // 8.3 批量隐藏菜单项
	  document.querySelector('#hideMenuItems').onclick = function () {
	    wx.hideMenuItems({
	      menuList: [
	        'menuItem:readMode', // 阅读模式
	        'menuItem:share:timeline', // 分享到朋友圈
	        'menuItem:copyUrl' // 复制链接
	      ],
	      success: function (res) {
	        alert('已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
	      },
	      fail: function (res) {
	        alert(JSON.stringify(res));
	      }
	    });
	  };

	  // 8.4 批量显示菜单项
	  document.querySelector('#showMenuItems').onclick = function () {
	    wx.showMenuItems({
	      menuList: [
	        'menuItem:readMode', // 阅读模式
	        'menuItem:share:timeline', // 分享到朋友圈
	        'menuItem:copyUrl' // 复制链接
	      ],
	      success: function (res) {
	        alert('已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
	      },
	      fail: function (res) {
	        alert(JSON.stringify(res));
	      }
	    });
	  };

	  // 8.5 隐藏所有非基本菜单项
	  document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
	    wx.hideAllNonBaseMenuItem({
	      success: function () {
	        alert('已隐藏所有非基本菜单项');
	      }
	    });
	  };

	  // 8.6 显示所有被隐藏的非基本菜单项
	  document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
	    wx.showAllNonBaseMenuItem({
	      success: function () {
	        alert('已显示所有非基本菜单项');
	      }
	    });
	  };

	  // 8.7 关闭当前窗口
	  document.querySelector('#closeWindow').onclick = function () {
	    wx.closeWindow();
	  };

	  // 9 微信原生接口
	  // 9.1.1 扫描二维码并返回结果
	  document.querySelector('#scanQRCode0').onclick = function () {
	    wx.scanQRCode({
	      desc: 'scanQRCode desc'
	    });
	  };
	  // 9.1.2 扫描二维码并返回结果
	  document.querySelector('#scanQRCode1').onclick = function () {
	    wx.scanQRCode({
	      needResult: 1,
	      desc: 'scanQRCode desc',
	      success: function (res) {
	        alert(JSON.stringify(res));
	      }
	    });
	  };
	});

	wx.error(function (res) {
	  alert(res.errMsg);
	});
</script>
</html>
